<template>
    <view class="home">
		<view class="content">
			<view class="content_header clearfix">
				<view class="float_left" :class="{active: type===1}" @click="switchTax('z')">
					正算税后
				</view>
				<view class="float_left " :class="{active: type===2}" @click="switchTax('f')">
					反推税前
				</view>
			</view>
			<view class="content_center">
				<view class="clearfix">
					<view class="float_left">
						收入金额
					</view>
					<input type="number" @input="inputYearNum" v-model="num" class="float_right ng-untouched ng-pristine ng-valid" :placeholder="tips"/>
				</view>
			</view>
			<view class="submit">
				<button type="default" :class="{noAllow: !allow, allow: allow}" @click="handleSumbit">计算</button>
			</view>
		</view>
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import { request } from '@/request/index'
	export default {
	    name: 'Index',
	    components: {
	    },
	    data() {
	        return {
				type: 1,
				num: '',
				allow: false,
				tips: '请输入收入金额'
	        }
	    },
		methods:{
			...mapMutations(['setInterestResult']),
			switchTax(e) {
				if(e=='z') {
					this.type = 1
					this.tips = '请输入收入金额'
				}else {
					this.type = 2
					this.tips = '请输入税后金额'
				}
			},
			inputYearNum() {
				this.num > 0 ? this.allow = true : this.allow = false
			},
			handleSumbit() {
				if(!this.allow) return
				let afterTaxIncome = 0
				let preTaxIncome = 0
				if(this.type == 1) {
					preTaxIncome = this.num*1
				}else {
					afterTaxIncome = this.num*1
				}
				const params = {
					url: '/calculate-tax/taxCalculatorIrregularSalary',
					method: 'POST',
					data: {
						  "afterTaxIncome": afterTaxIncome,
						  "calClass": this.type,
						  "calType": 6,
						  "preTaxIncome": preTaxIncome,
						  "taxPayable": 0
					},
				}
				request(params, true).then(res => {
					if(res.data.code === '0') {
						this.setInterestResult(res.data.data)
						uni.navigateTo({
							url: '/pages/other/interest/result'
						});
					}else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						});
					}
				})
			}
		}
	}
</script>

<style>
	.home .content_header {
	    width: 70%;
	    margin: 20px auto;
	    height: 43px;
	}
	.clearfix {
	    zoom: 1;
	}
	.clearfix::after {
	    content: '';
		display: block;
		clear: both;
	}
	.home .content_header > uni-view {
	    width: 49%;
	    height: 43px;
	    text-align: center;
	    line-height: 43px;
	    font-size: 1.1em;
	    background-color: #FFFFFF;
	    border: 1px solid #67b1f1;
	}
	.home .active {
	    background-color: #67b1f1!important;
	    color: #FFFFFF!important;
	}
	.float_left {
	    float: left;
	}
	.float_right {
	    float: right;
	}
	.home .content_center > uni-view:first-of-type {
	    border-top: 1px solid #e5e5e5;
	}
	.home .content_center .clearfix {
	    padding: 10px 20px;
	    line-height: 40px;
	    border: 1px solid #e5e5e5;
	    background-color: #FFFFFF;
	    border-top: none;
	}
	.home .content_center .clearfix > uni-view {
	    line-height: 40px;
		font-size: .7333rem;
	}
	.home .content_center .clearfix input {
	    display: block;
	    padding: 0px 10px;
	    width: 70%;
	    text-align: right;
	    font-size: 1em;
	    height: 40px;
	}
	
	.home .submit {
	    padding: 40px 20px;
	}
	.home .submit > button {
	    border-radius: 3px 3px;
	    font-size: 1.2em;
	    width: 100%;
	    color: #FFFFFF;
	    line-height: 50px;
	    text-align: center;
	    height: 50px;
	}
	.noAllow {
	    background-color: #CCCCCC;
	}
	.allow {
	    background-color: #67b1f1;
	}
</style>